<template>
	<div id="login-page">
	  <div class="page-top">
		<h1>登录</h1>
		<router-link to="/">回主页</router-link>
	  </div>
	  <form @submit.prevent="submitForm">
		<div>
		  <label for="username">用户名：</label>
		  <input type="text" id="username" v-model="username" placeholder="用户名" required />
		</div>
		<div>
		  <label for="password">密码：</label>
		  <input type="password" id="password" v-model="password" placeholder="密码" required />
		</div>
		<button type="submit">登录</button>
	  </form>
	  <div>
		<p>没有账户？<router-link to="/register">立即注册</router-link></p>
	  </div>
	</div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  // import axios from 'axios';
  import { useRouter } from 'vue-router';
  import request from '../api/request';
  
  
  const username = ref('');
  const password = ref('');
  
  const router = useRouter();
  
  async function submitForm() {
	// console.log('Username:', username.value, 'Password:', password.value);
	// 在此处执行登录逻辑，例如 API 调用
	try {
	  const response = await request.post('login', {
		username: username.value,
		password: password.value,
	  });
  
	  if (response.data.status === 'success') {
		console.log('登录成功，用户名：', response.data.username);
		localStorage.setItem('username', response.data.username);
		// 在此处处理登录成功的逻辑，例如跳转到另一个页面
		router.push('/').then(() => {
		  // location.reload();
		});
	  } else {
		console.log('登录失败');
		// 在此处处理登录失败的逻辑，例如显示错误消息
	  }
	} catch (error) {
	  console.error('请求错误：', error);
	}
  }
  </script>
  
  <style scoped>
  #login-page {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
  }
  .page-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  form {
	display: flex;
	flex-direction: column;
  }
  
  div {
	margin-bottom: 1rem;
  }
  
  label {
	display: block;
	margin-bottom: 0.5rem;
  }
  
  input {
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
  }
  
  button {
	background-color: #4caf50;
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
  }
  
  button:hover {
	background-color: #45a049;
  }
  </style>
  